<!-- 数据看板 -->
<template>
  <div class="whole">
    <el-container>
      <el-aside width="200px">
        <CommonAside />
      </el-aside>
      <el-container>
        <el-header>
          <ComponentsHeader />
        </el-header>
        <el-main>
          <el-select
            v-model="value"
            placeholder="筛选">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- 车辆1 -->
          <div class="tag-group">
            <span class="tag-group__title">车辆1</span>
            <el-tag
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="车辆1"
              class="tag-group_main">
              {{ item.label }}
            </el-tag>
          </div>
          <!-- 车辆2 -->
          <div class="tag-group">
            <span class="tag-group__title">车辆2</span>
            <el-tag
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="车辆2"
              class="tag-group_main">
              {{ item.label }}
            </el-tag>
          </div>
          <!-- 车辆3 -->
          <div class="tag-group">
            <span class="tag-group__title">车辆3</span>
            <el-tag
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="车辆3"
              class="tag-group_main">
              {{ item.label }}
            </el-tag>
          </div>
          <!-- 车辆4 -->
          <div class="tag-group">
            <span class="tag-group__title">车辆4</span>
            <el-tag
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="车辆4"
              class="tag-group_main">
              {{ item.label }}
            </el-tag>
          </div>
          <!-- 车辆5 -->
          <div class="tag-group">
            <span class="tag-group__title">车辆5</span>
            <el-tag
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="车辆5"
              class="tag-group_main">
              {{ item.label }}
            </el-tag>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import ComponentsHeader from "@/components/ComponentsHeader";

export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
        },
        {
          value: "选项2",
        },
        {
          value: "选项5",
        },
      ],
      value: "",
      items: [
        { type: "", label: "工位一" },
        { type: "success", label: "工位二" },
        { type: "info", label: "工位三" },
        { type: "danger", label: "工位四" },
        { type: "warning", label: "工位五" },
      ],
    };
  },
  components: {
    CommonAside,
    ComponentsHeader,
  },
};
</script>

<style>
.whole {
  background-color: #edf7ff;
}
.el-header {
  padding: 0;
}
.tag-group {
  margin-top: 20px;
  height: 80px;
  background-color: #ffffff;
  border-radius: 2%;
}
.tag-group__title {
  margin-left: 30px;
  margin-right: 70px;
  line-height: 80px;
}
.tag-group_main {
  margin-right: 40px;
  box-shadow: 1px 1px 2px rgba(166, 166, 166, 0.3);
}
</style>
